<template>
    <div>
       <div class="goBack" @click="goBack"><i class="el-icon-close"></i></div>
       <div class="city-body">
           <div class="herCity">
               <span>当前定位城市</span>
               <p>北京</p>
           </div>
           <div class="electCity">
               <p class="xuanze">选择城市</p>
               <ul>
                   <li class="city" v-for="item in litsCity" :key="item.id" @click="getEleCity(item.city)"><span>{{item.city}}</span> <i :class="{'el-icon-check t':active===item.city}"></i></li>
               </ul>
           </div>
       </div>
    </div>
</template>

<script>
import api from '../api'
export default {
    name:"City",
    data(){
        return{
            active:"",
            litsCity:[]
        }
    },
    mounted(){
        this.active=this.$route.params.cityname
        api.getCity().then(res=>{
            this.litsCity=res.data.list
        })
    },
    methods:{
        goBack(){
            this.$router.go(-1)
        },
        getEleCity(name){
            this.active=name
           setTimeout(()=>{
                this.$bus.$emit("cityNameData",name)
           },100)
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.goBack{
    position: absolute;
    top:13px ;
    left:12px ;
    font-size: 22px;
}
.city-body{
    width: 100%;
    height: 300px;
    margin-top: 54px;
    /* background-color: plum; */
    box-sizing: border-box;
    padding: 0 20px;
}
.herCity{
    font-size: 14px;
}
.herCity>span{
   color: #999999;
}
.herCity>p{
    margin-top: 9px;
    color: #101010;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(201, 200, 200);
}
.electCity{
    margin-top: 19px;
}

.xuanze{
    color: #999999;
}
.city{
     margin-top: 15px;
    padding-bottom: 10px;
      border-bottom: 1px solid rgb(201, 200, 200);
}
.t{
    font-size: 16px;
    font-weight: 700;
    margin-left: 276px;
}
</style>